/**
* @Author: 858834013@qq.com
* @Name: item
* @Date: 2022-07-01
* @Desc:
*/
<template>
  <div class="itemBody">
    <div class="list">
      <div class="listItem wow fadeInLeft" :data-wow-delay="index * 0.5 + 's'" v-for="(item, index) in list" :key="index">
        <div class="iconMain">
          <i class="icon iconfont " :class="item.icon"></i>
        </div>
        <div class="listItemInfo">
          <span>{{ item.name }}</span>
          <div class="listItemInfo2">
            <gsapNum :delay="index * 0.5" :number="item.value"></gsapNum>
            <span>{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {waterPlantMonitoring} from "@/api/api/waterSupplyOverview.js";
import { getDeviceStatistic } from '@/api/iot/device'
import gsapNum from "@/components/gsapNum/index.vue";
// {
//                     name: '今日上报',
//                     icon: 'icon-regulatory-reporting',
//                     value: Mock.mock('@integer(10, 20)'),
//                     unit: '个',
//                 }, {
//                     name: '今日完工',
//                     icon: 'icon-wancheng',
//                     value: Mock.mock('@integer(10, 20)'),
//                     unit: '个',
//                 }
export default {
  components: { gsapNum },
  name: "item",
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      getDeviceStatistic().then((response) => {
        if (response.code == 200) {
          let totalobj = {
            name: '总数量',
            icon: 'icon-wancheng',
            value:response.data.zutaiCount,
            unit: '个',
          }
          this.list.push(totalobj);
          let obj = {
            name: '今日组态',
            icon: 'icon-wancheng',
            value:response.data.zutaiJtCount,
            unit: '个',
          }
          let obj2 = {
            name: '昨日组态',
            icon: 'icon-wancheng',
            value:response.data.zutaiZtCount,
            unit: '个',
          }
          this.list.push(obj);
          this.list.push(obj2);
        }
      })

    },
  },
}
</script>

<style lang="scss" scoped>
.itemBody {
  width: 100%;
  height: calc(100% - 0px);
  position: relative;

  .list {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;

    .listItem {
      width: calc(50% - 20px);
      margin-left: 10px;
      margin-top: 18px;
      height: 33.3%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .iconMain {
        background: url("./assets/iconbgAnimate.png") no-repeat;
        width: 45px;
        height: 51px;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        .icon {
          font-size: 20px;
          background: -webkit-linear-gradient(#88e1ff, #26c8ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          color: transparent;
        }
      }

      .listItemInfo {
        margin-left: 10px;

        .listItemInfo2 {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;
        }

        :deep(.gsapNum) {
          font-size: 20px;
          font-weight: bold;
          color: #61e8e3;
          margin-right: 5px;
        }

        span {
          font-size: 14px;
          font-weight: normal;
          color: #FFFFFF;
        }

        p {
          font-size: 14px;
          font-weight: normal;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
